<template>
  <div>
    <div class="filter-container" style="margin-bottom:10px">
      <el-input style="width: 50%" class="input-with-select" v-model="search">
        <el-button
          class="filter-item"
          type="primary"
          slot="append"
          icon="el-icon-search"
        >
          搜索
        </el-button>
      </el-input>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="add"
      >
        添加
      </el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item
              label="封面"
              v-if="props.row.img != 'http://mather.api/'"
            >
              <span>
                <el-image
                  style="width: 100px; height: 100px; margin-right:10px"
                  :src="props.row.img"
                  fit="cover"
                ></el-image>
              </span>
            </el-form-item>
            <el-form-item label="文章内容">
              <span v-html="props.row.content"> </span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column type="selection" width="55" align="center">
      </el-table-column>

      <el-table-column label="文章id" width="80" align="center" prop="a_id">
      </el-table-column>

      <el-table-column label="标题" align="center" width="350" prop="title">
      </el-table-column>

      <el-table-column label="文章类别" align="center" prop="ac_id">
      </el-table-column>

      <el-table-column label="作者" align="center" prop="author_name">
      </el-table-column>

      <el-table-column label="发布时间" width="160" align="center" prop="cTime">
      </el-table-column>

      <el-table-column label="是否原创" align="center" prop="original">
        <template slot-scope="x">
          <span v-if="x.row.original == 0">
            否
          </span>
          <span v-else>
            是
          </span>
        </template>
      </el-table-column>

      <el-table-column label="阅读量" align="center" prop="read_count">
      </el-table-column>

      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click.native.prevent="deleteRow(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagectn" v-if="pages > 10">
      <el-pagination
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="pages"
        @current-change="pagechange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getarticle } from "@/api/article/article.js";
import { deletearticle } from "@/api/article/article.js";
import { getnum } from "@/api/article/article.js";
export default {
  data() {
    return {
      tableData: [],
      search: "",
      pages: 0,
      thispage: 1
    };
  },
  created() {
   
    this.requestlist(1);
    this.requestpage();
  },
  methods: {
    pagechange(page) {
      this.requestlist(page);
      this.thispage = page;
    },
    handleEdit(index, row) {
      console.log(index, row);
      // this.addgoods = true;
      var save = JSON.stringify(row);
      sessionStorage.setItem("editrow", save);
      console.log(JSON.parse(sessionStorage.getItem("editrow")));
      this.form = JSON.parse(sessionStorage.getItem("editrow"));
      console.log(this.form);
      var id = row.a_id;
      this.$router.push({
        path: "/article/edit",
        query: { id }
      });
    },
    deleteRow(index, rows) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          var that = this;
          that.requestdelete(rows.a_id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    add() {
      var that = this;
      sessionStorage.removeItem("editrow");
      that.$router.push({
        path: "/article/edit"
      });
    },
    requestlist(page) {
      var that = this,
        data = {
          field: "ac_id",
          op: ">",
          value: "0",
          page: page
        };
      getarticle(data).then(res => {
        that.tableData = res;
        console.log(that.tableData);
      });
    },
    requestdelete(id) {
      var that = this,
        data = {
          field: "a_id",
          op: "=",
          value: id
        };
      deletearticle(data).then(function() {
        that.requestlist(that.thispage);
      });
    },
    requestpage() {
      var that = this,
        data = {
          field: "a_id",
          op: ">",
          value: "0"
        };
      getnum(data).then(res => {
        that.pages = res;
      });
    }
  }
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-bottom: 0;
  width: 65%;
  white-space: pre-line;
}
.el-form-item__content {
  display: flex;
  flex-wrap: wrap;
  vertical-align: middle;
}
.el-upload--picture-card {
  margin: 1%;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.close {
  opacity: 0;
  transition: opacity 0.3s;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}
.el-upload--picture-card:hover .close {
  opacity: 1;
}
.close > i {
  margin: auto;
}
.pagectn {
  width: 100%;
  background-color: #fff;
  padding: 5px;
}
</style>
